<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <link  href="https://fonts.googleapis.com/css?family=lato:300,400&display=swap" rel="stylesheet"> -->
    <!-- <link  rel="stylesheet" type="text/css" href="style.css" /> -->
    <script src="/js/jquery-3.7.1.min.js"></script>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            margin: 0;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-family: 'Lato', sans-serif;
            font-weight: 300;
            background: linear-gradient(to left bottom, white,white,white,white,white);
        }

        .login-div{
            filter: blur(0.4px);
            width: 430px;
            height: 700px;
            padding: 60px 35px 35px 35px;
            border-radius: 10px;
            background: radial-gradient( circle, #555555,#535353,#505050,#4e4e4e,#4c4c4c);
            box-shadow:
                /*bottom shadow*/
                    0px 20px 20px  rgba(0,0,0, 0.2),
                    0px 5px 10px  rgba(0,0,0, 0.2),
                    0px 70px 50px  rgba(0,0,0, 0.4),
                    30px 50px 50px  rgba(0,0,0, 0.2),
                    -30px 50px 50px  rgba(0,0,0, 0.2),
                    inset 20px 0px 6dvw  rgba(0,0,0, 0.1),
                    inset -20px 0px 60px  rgba(0,0,0, 0.1);
        }

        .logo{
            background-image: url("/image/logo2.png");
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 0 auto;
            box-shadow: 1px 1px 2px rgba(0,0,0, 0.1);
        }
        .title{
            text-align: center;
            font-size: 28px;
            padding-top: 24px;
            letter-spacing: 0.5px;
        }
        .sub-title{
            text-align: center;
            font-size: 15px;
            padding-top: 7px;
            letter-spacing: 3px;
            text-transform: uppercase;
            font-weight: bold;
        }
        .fields{
            width: 100%;
            padding: 100px 5px 30px 5px;
        }
        .fields input{
            border: none;
            outline: none;
            background: none;
            font-size: 18px;
            font-family: 'Lato',sans-serif;
            color: white;
            padding: 10px 10px 10px 5px;
        }
        .username,.password{
            display: block;
            border-bottom: 1px solid #b3b3b3;
            margin-bottom: 30px;

        }
        ::placeholder{
            color:white;
            opacity: 1;
            font-size: 20px;
            font-weight: 300;
        }
        ::-ms-input-placeholder{
            color: white;
            font-size: 20px;
            font-weight: 300;
        }
        .signin-button{
            outline: none;
            border: none;
            cursor: pointer;
            width: 100%;
            height: 60px;
            border-radius: 5px;
            font-size: 22px;
            font-family: 'Lato', sans-serif;
            color: white;
            text-align: center;
            letter-spacing: 1px;
            background: radial-gradient(circle,#24cfaa,#26c5a3,#28bb9c,#29b294,#2aa88d);
            box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
        .signin-button:hover{
            background: radial-gradient(circle,red,red,red,red,red);
        }
        .signin-button:active{
            background: radial-gradient(circle,blue,blue,blue,blue,blue);
        }
        .link {
            padding-top: 20px;
            text-align: center;

        }
        .link a {
            text-decoration: none;
            color: white;
            font-size: 20px;
        }
        .fields svg{
            height: 22px;
            width: 22px;
            margin-bottom: -3px;
            margin-right: 10px;
        }
    </style>


</head>
<body style="background-image:url('/image/22.jpg') ">
<div class="login-div">
    <div class="logo"></div>
    <div class="title">Red Stapler</div>
    <div class="sub-title">Beta</div>
    <div class="fields">
        <div class="username"><svg t="1695536226306" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5933" width="200" height="200"><path d="M628.992 607.850667c-57.749333 46.272-93.781333 69.226667-129.728 69.226667-34.517333 0-69.376-21.504-123.285333-63.509333L55.082667 895.957333l903.701333 0L632.661333 605.098667C631.466667 605.973333 630.122667 607.061333 628.992 607.850667z" fill="#272636" p-id="5934"></path><path d="M248.405333 514.858667C172.224 456.106667 84.352 388.117333 0 321.429333L0 853.76c0 1.706667 0.810667 3.136 0.981333 4.714667l323.52-284.714667C301.056 555.456 275.904 536.106667 248.405333 514.858667z" fill="#272636" p-id="5935"></path><path d="M1021.482667 866.133333C1022.784 862.272 1024 858.218667 1024 853.76L1024 298.837333c-101.269333 78.762667-247.829333 192.917333-340.394667 265.962667L1021.482667 866.133333z" fill="#272636" p-id="5936"></path><path d="M960 128.021333 64 128.021333c-23.36 0-64 40.682667-64 64l0 50.432c94.378667 75.136 196.885333 154.218667 283.733333 221.205333 47.893333 36.970667 90.816 70.186667 124.693333 96.64 91.306667 71.616 91.306667 71.616 184.512-2.901333C677.226667 490.026667 904 313.557333 1024 220.224L1024 192.085333C1024 168.64 983.381333 128.021333 960 128.021333z" fill="#272636" p-id="5937"></path></svg>
            <input type="text" class="user-input" placeholder="Username" id="username" name="username" />
        </div>
        <div class="password"><svg t="1695536323368" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10270" width="200" height="200"><path d="M466.346667 469.333333l-11.178667-25.6a170.666667 170.666667 0 1 0 0 136.533334l11.178667-25.6H725.333333v85.333333h85.333334v-85.333333h85.333333v-85.333334H466.346667z m54.058666-85.333333H981.333333v256h-85.333333v85.333333h-256v-85.333333h-119.594667a256 256 0 1 1 0-256z" fill="#2E2F30" p-id="10271"></path><path d="M298.666667 512m-85.333334 0a85.333333 85.333333 0 1 0 170.666667 0 85.333333 85.333333 0 1 0-170.666667 0Z" fill="#2E2F30" p-id="10272"></path></svg>
            <input type="password" class="pass-input" placeholder="Password" id="password" name="password" />
        </div>
<!--        <input type="text" class=" form-control" id="username" name="username" placeholder="用户名">-->
<!--        <input type="password" class="form-control" id="password" name="password" placeholder="密码">-->
    </div>
    <button class="signin-button" onclick="login();">LOG IN</button>
    <div class="link"><a href="#">Forgot password?</a></div>
</div>

<script type="text/javascript">
    function login(){
        var user=$("#username").val();
        var password=$("#password").val();

        $.ajax({
            url:"/webapi/login/user",
            data:{
                user:user,
                password:password
            }
        }).done(function (rs) {
            if(rs>=0){
                window.location.href="/student/list";

            }else{
                alert("出错了，你的用户和密码是乱写的吗？为什么我找不到呢？");
            }
        });

    }
</script>
</body>
</html>